<!-- 结算页面-确认订单 -->
<template>
  <div class="checkout-page">
    <h2>确认订单</h2>

    <!-- 收货信息 -->
    <div class="delivery-info">
      <p><strong>收货人:</strong> {{ deliveryInfo.receiver }}</p>
      <p><strong>联系方式:</strong> {{ deliveryInfo.contact }}</p>
      <p><strong>收货地址:</strong> {{ deliveryInfo.address }}</p>
    </div>

    <!-- 商品信息 -->
    <el-table :data="cartItems" style="width: 100%">
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
      <el-table-column label="数量">
        <template #default="scope">
          {{ scope.row.quantity }}
        </template>
      </el-table-column>
      <el-table-column label="小计">
        <template #default="scope">
          {{ scope.row.price * scope.row.quantity }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 总价 -->
    <div class="cart-total">
      <span>总价：{{ totalAmount }}</span>
    </div>

    <!-- 提交订单按钮 -->
    <el-button type="primary" @click="submitOrder">提交订单</el-button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
// import { useStore } from '@/stores'; // 如果使用 Pinia 状态管理

const router = useRouter();

// 示例数据（实际应从状态管理中获取）
const cartItems = ref([
  {
    id: 1,
    name: '商品 A',
    price: 100,
    quantity: 2
  },
  {
    id: 2,
    name: '商品 B',
    price: 150,
    quantity: 1
  },
  {
    id: 3,
    name: '商品 C',
    price: 200,
    quantity: 3
  }
]);

// const store = useStore();
// const cartItems = computed(() => store.cartItems);

const totalAmount = computed(() => {
  return cartItems.value.reduce((total, item) => total + (item.price * item.quantity), 0);
});

const deliveryInfo = {
  receiver: '康哥',
  contact: '186****1688',
  address: '黑龙江省哈尔滨市哈西华润大厦云脉'
};

const submitOrder = () => {
  // 提交订单逻辑
  console.log('Order submitted');
  // 可以在这里添加订单提交的逻辑，比如调用 API 等
  router.push('/payment'); // 跳转到订单成功页面
};
</script>

<style scoped>
.checkout-page {
  padding: 20px;
}

.delivery-info {
  margin-bottom: 20px;
}

.cart-total {
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>